<template>
  <div class="ideaAnalysis">
    <!-- 想法总览 -->
    <el-card shadow="hover" class="ideaBox">
      <!-- <h4>想法总览</h4> -->
      <div class="searchBox1">
        <div>
          <h4>想法总览</h4>
        </div>
        <div>
          <el-radio-group
            v-model="ideaType"
            size="medium"
            fill="#39383D"
            @change="getIdeaAll"
          >
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="2">总计</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>发布想法数</h4>
          <div>
            <span class="numSpan">{{ release }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>发布率</h4>
          <div>
            <span class="numSpan">{{ releaseRate }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>想法回复数</h4>
          <div>
            <span class="numSpan">{{ reply }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>想法回复率</h4>
          <div>
            <span class="numSpan">{{ replyRate }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
      </div>
      <!-- 想法分析 -->
      <div class="searchBox">
        <div>
          <h3>想法分析</h3>
        </div>
        <div>
          <el-date-picker
            v-model="ideaAnalysisTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="ideaAnalysisOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" @click="getIdeaAnalysis"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcel"
            >导出Excel</el-button
          >
        </div>
      </div>

      <div class="ideaCard">
        <el-card class="one">
          <div class="oneItem">
            <div>
              <h4>发布想法数</h4>
              <span class="numSpan">{{ release1 }}</span>
            </div>
            <div>
              <h4>发布用户数</h4>
              <span class="numSpan">{{ releaseUser }}</span>
            </div>
            <div>
              <h4>发布率</h4>
              <span class="numSpan">{{ releaseRate1 }}</span>
            </div>
          </div>
          <el-divider></el-divider>
          <span>{{ timeB }}</span>
        </el-card>
        <el-card class="one">
          <div class="oneItem">
            <div>
              <h4>发布评论数</h4>
              <span class="numSpan">{{ comments }}</span>
            </div>
            <div>
              <h4>评论用户数</h4>
              <span class="numSpan">{{ commentsUser }}</span>
            </div>
            <div>
              <h4>评论率</h4>
              <span class="numSpan">{{ commentsRate }}</span>
            </div>
          </div>
          <el-divider></el-divider>
          <span>{{ timeB }}</span>
        </el-card>
      </div>

      <div class="ideaCard">
        <el-card class="one">
          <div class="oneItem">
            <div>
              <h4>点赞想法数</h4>
              <span class="numSpan">{{ like }}</span>
            </div>
            <div>
              <h4>点赞用户数</h4>
              <span class="numSpan">{{ likeUser }}</span>
            </div>
            <div>
              <h4>点赞率</h4>
              <span class="numSpan">{{ likeRate }}</span>
            </div>
          </div>
          <el-divider></el-divider>
          <span>{{ timeB }}</span>
        </el-card>
        <!-- <el-card class="one">
          <div class="oneItem">
            <div>
              <h4>收藏想法数</h4>
              <span class="numSpan">{{ collection }}</span>
            </div>
            <div>
              <h4>收藏用户数</h4>
              <span class="numSpan">{{ collectionUser }}</span>
            </div>
            <div>
              <h4>收藏率</h4>
              <span class="numSpan">{{ collectionRate }}</span>
            </div>
          </div>
          <el-divider></el-divider>
          <span>{{ timeB }}</span>
        </el-card> -->
        <el-card class="one">
          <div class="oneItem">
            <div>
              <h4>分享想法数</h4>
              <span class="numSpan">{{ forwarding }}</span>
            </div>
            <div>
              <h4>分享用户数</h4>
              <span class="numSpan">{{ forwardingUser }}</span>
            </div>
            <div>
              <h4>分享率</h4>
              <span class="numSpan">{{ forwardingRate }}</span>
            </div>
          </div>
          <el-divider></el-divider>
          <span>{{ timeB }}</span>
        </el-card>
      </div>

      <!-- <div class="ideaCard">
        <el-card class="one">
          <div class="oneItem">
            <div>
              <h4>分享想法数</h4>
              <span class="numSpan">{{ forwarding }}</span>
            </div>
            <div>
              <h4>分享用户数</h4>
              <span class="numSpan">{{ forwardingUser }}</span>
            </div>
            <div>
              <h4>分享率</h4>
              <span class="numSpan">{{ forwardingRate }}</span>
            </div>
          </div>
          <el-divider></el-divider>
          <span>{{ timeB }}</span>
        </el-card>
      </div> -->
    </el-card>
  </div>
</template>

<script>
import { IdeaAll, IdeaAnalysis, ideaAnalysisExcel } from "@/api/DataAnalysis";
export default {
  inject: ["reload"],
  data() {
    return {
      ideaType: "1",
      release: "",
      releaseRate: "",
      reply: "",
      replyRate: "",
      time: "",
      //想法分析
      ideaAnalysisOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      ideaAnalysisTimeValStartDate: "",
      ideaAnalysisTimeValEndDate: "",
      ideaAnalysisTimeVal: "", //想法分析时间
      release1: "",
      releaseUser: "",
      releaseRate1: "",
      like: "",
      likeUser: "",
      likeRate: "",
      forwarding: "",
      forwardingUser: "",
      forwardingRate: "",
      comments: "",
      commentsUser: "",
      commentsRate: "",
      // collection: "",
      // collectionUser: "",
      // collectionRate: "",
      timeB: "",
    };
  },
  methods: {
    //想法分析查询搜索
    ideaAnalysisBtn() {},
    //想法分析时间
    focus(time) {
      if (!this.ideaAnalysisTimeVal) {
        this.ideaAnalysisTimeVal = [];
      }
      this.ideaAnalysisTimeValStartDate = this.ideaAnalysisTimeVal[0];
      this.ideaAnalysisTimeValEndDate = this.ideaAnalysisTimeVal[1];
    },
    //获取想法总览
    getIdeaAll() {
      IdeaAll({ type: this.ideaType }).then((res) => {
        if (res.code == 0) {
          this.release = res.data.release;
          this.releaseRate = res.data.releaseRate;
          this.reply = res.data.reply;
          this.replyRate = res.data.replyRate;
          this.time = res.data.time;
        }
      });
    },
    //想法分析
    getIdeaAnalysis() {
      IdeaAnalysis({
        startTime: this.ideaAnalysisTimeValStartDate,
        endTime: this.ideaAnalysisTimeValEndDate,
      }).then((res) => {
        if (res.code == 0) {
          this.release1 = res.data.release;
          this.releaseUser = res.data.releaseUser;
          this.releaseRate1 = res.data.releaseRate;
          this.like = res.data.like;
          this.likeUser = res.data.likeUser;
          this.likeRate = res.data.likeRate;
          this.forwarding = res.data.forwarding;
          this.forwardingUser = res.data.forwardingUser;
          this.forwardingRate = res.data.forwardingRate;
          this.comments = res.data.comments;
          this.commentsUser = res.data.commentsUser;
          this.commentsRate = res.data.commentsRate;
          // this.collection = res.data.collection;
          // this.collectionUser = res.data.collectionUser;
          // this.collectionRate = res.data.collectionRate;
          this.timeB = res.data.time;
        }
      });
    },
    //导出excel
    async exportExcel() {
      const res = await ideaAnalysisExcel({
        startTime: this.ideaAnalysisTimeValStartDate,
        endTime: this.ideaAnalysisTimeValEndDate,
      });
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        const tHeader = res.data.tHeader; // 上面设置Excel的表格第一行的标题
        // const filterVal = [
        //   "date",
        //   "personNumber",
        //   "sessionNumber",
        //   "resetPerson",
        //   "resetNumber",
        //   "useNumber",
        //   "reUseNumber",
        //   "successNumber",
        // ]; // 上面的index、nickName、name是tableData里对象的属性key值
        // const list = this.tableData; //把要导出的数据tableData存到list
        const data = res.data.tBody;
        console.log(data);
        export_json_to_excel(tHeader, data, "想法分析"); //最后一个是表名字
      });
    },
  },
  created() {
    this.getIdeaAll();
    this.getIdeaAnalysis();
  },
};
</script>

<style lang="less" scoped>
.ideaAnalysis {
  margin: 30px;
  height: 100%;
  .userStatisticsItem {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .el-divider--horizontal {
      margin: 10px 0px;
    }
    .one {
      width: 300px;
      height: 100%;
      h4 {
        margin: 0px;
        font-size: 20px;
        margin-bottom: 10px;
      }
      .numSpan {
        font-size: 26px;
      }
    }
  }
  .searchBox {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
  }
  .searchBox1 {
    display: flex;
    justify-content: space-between;
    h4 {
      margin: 0px;
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
  .ideaBox {
    margin-top: 40px;
    .searchBox {
      display: flex;
      justify-content: space-between;
      margin-top: 80px;
    }
    .ideaCard {
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
      .one {
        width: 46%;
        .oneItem {
          display: flex;
          justify-content: space-between;
          h4 {
            margin: 0px;
            font-size: 20px;
            margin-bottom: 10px;
          }
          .numSpan {
            font-size: 26px;
          }
        }
        .el-divider {
          margin: 10px 0px;
        }
      }
    }
  }
}
</style>